import React,{useState,useEffect} from 'react'
import { Link,useHistory,Route,Redirect,useRouteMatch} from 'react-router-dom';
import {useRequest} from './hooks';

const Home = (props) => {
    const {path,url}=useRouteMatch();
    const history=useHistory();

    const [topics,setOptions,options]=useRequest("https://cnodejs.org/api/v1/topics");
    
    const tabs=[
                {title:'全部',tab:'all'},
                {title:'精华',tab:'good'},
                {title:'分享',tab:'share'},
                {title:'问答',tab:'ask'},
                {title:'招聘',tab:'job'}
    ]

    const pageButton=[1,2,3,4,5,6,7,8,9];

    return (
        <ul>
            <div style={{height:100}}>
                <Link to='/home/all'>全部</Link> 
                <Link to='/home/share'>分享</Link>
                <Link to='/home/good'>精华</Link>
                {/*//!首页有问题成了 //all  其它页面就没有问题 */}
                {/* <Link to={`${url}/all`}>全部</Link>
                //! 两种解决办法，一种是在子路由里改，但是只能看 全部 页面
                //! 另一种是在一级路由里改（加上home重定向），但是首页只能是/home了，没有 / 这种了
                <Link to={`${url}/share`}>分享</Link>
                <Link to={`${url}/good`}>精华</Link> */}
                <div>
                    {/*//! 子路由的路径要和父路由前面path一致,二级路由前面必须加上一个 /xx 和第一层路由一样 */}
                    <Route path='/home/all' render={()=><h1>全部</h1>}/>
                    <Route path='/home/share' render={()=><h1>分享</h1>}/>
                    <Route path='/home/good' render={()=><h1>精华</h1>}/>
                    <Redirect to='/home/all'/>{/* //! ???????????????????????????? 当被挂载时，将路由重定向为 to 属性指定的地址 */}
                    
                    {/* <Route path={`/${path}/all`} render={()=><h1>全部</h1>}/>
                    <Route path={`/${path}/share`} render={()=><h1>分享</h1>}/>
                    <Route path={`/${path}/good`} render={()=><h1>精华</h1>}/>
                    //! 第一种解决办法
                    <Redirect to={`/home/all`}/> */}
                </div>
            </div>
            <div>
                {
                    pageButton.map(item=>(
                        <button key={item} onClick={()=>setOptions({...options,page:item})}>{item}</button>
                    ))
                }
            </div>
            <div>
                {
                    tabs.map(item=>(
                        <button key={item.tab} onClick={()=>setOptions({tab:item.tab,page:1})}>{item.title}</button>
                    ))
                }
                {/* <button>全部</button>
                <button>分享</button>
                <button onClick={()=>{setOptions({tab:'good'})}}>精华</button> */}
            </div>
            {/* 方法二：js跳转 */}
            {                                               
                topics.map(item=><li onClick={()=>history.push(`/detail/${item.id}`)} key={item.id}>{item.title}</li>)
            }
            {/* 方法一：Link */}
            {/* {                                               //! 字符串加变量==>表达式——>大括号
                topics.map(item=><li key={item.id}><Link to={`/detail/${item.id}`}>{item.title}</Link></li>)
            } */}
        </ul>
        
    )
}

export default Home
